<template lang="pug">
  .graphic-dialog(v-if="data")
    el-dialog(
      @close="closeDialogFun"
      :title="data.title"
      :visible.sync="showModal"
      :before-close="beforeCloseHandler")

      .dialog-content.ql-editor(v-html="data.contents")
      .audioWrap(v-if="data.audio_file")
        audio(ref="audioControl" :src="data.audio_file", autoplay, loop, controls)
        .playBtn
          span 图文解说：
          i(@click="controlPlay" :class="[audioState ? 'el-icon-video-pause' : 'el-icon-video-play']")

</template>

<script>
import modalMixin from '@/mixins/modal'
export default {
  name: 'graphicModal',
  mixins: [modalMixin],
  data() {
    return {
      data: null,
      audioState: true  // true 播放, false 暂停
    }
  },
  mounted() {
    this.$vgo.on('modal:graphic', data => {
      console.log(data)
      this.data = data
      this.openModal()
      this.$bar.finish()
    })
  },
  methods:{
    controlPlay(){
      // console.log(this.$refs.audioControl.pause())
      if(this.audioState){
        this.$refs.audioControl.pause()
        this.audioState = false
      }else{
        this.$refs.audioControl.play()
        this.audioState = true
      }
    },
    closeDialogFun(){
      if (this.$refs.audioControl) {
        this.$refs.audioControl.pause()
      }
      this.audioState = false
    }
  },
}
</script>

<style lang="stylus">
.graphic-dialog
  .el-dialog
    position relative
    .el-dialog__body
      height: 400px
      overflow-y: auto
      position relative
      .dialog-content 
        padding-bottom 50px
      img
        max-width: 100%
    .audioWrap
      box-sizing: border-box;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0px;
      height: 58px;
      padding: 0 20px;
      background-color: #3c3c3c
      box-shadow 0px 1px 5px #3c3c3c
      audio 
        display none
      .playBtn
        display inline-block
        margin-bottom 20px
        margin-top 10px
        color #c4c3c3
        span 
          vertical-align 8px
          font-size 16px
        i 
          font-size 38px
          cursor pointer
</style>
